<template>
  <div class="line-wrapper">
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
    <div class="line-4"></div>
    <div class="line-5"></div>
    <div class="line-6"></div>
    <div class="line-7"></div>
    <div class="line-8"></div>
  </div>
</template>

<script>
// , 260, 70, 100, 60, 180, 200
export default {
  data() {
    return {
      data1: [
        {
          color: 0x6666ff,
          data: [
            {
              title: "111",
              quantY: 50,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 260,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 30,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 190,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 0,
            },
           {
              title: "111",
              quantY: 40,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 260,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 30,
              quantZ: 0,
            },
          ],
        },
      ],
      data2: [
        {
          color: 0x6666ff,
          data: [
            {
              title: "111",
              quantY: 50,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 260,
              quantZ: 60,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 20,
            },
            {
              title: "111",
              quantY: 70,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 70,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 20,
            },
            {
              title: "111",
              quantY: 10,
              quantZ: 40,
            },
          ],
        },
      ],
      data3: [
        {
          data: [
            {
              title: "111",
              quantY: 50,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 260,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 70,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 10,
              quantZ: 0,
            },
          ],
          color: 0x33ccff,
        },
        {
          color: 0xff88c2,
          data: [
            {
              title: "111",
              quantY: 80,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 200,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 170,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 15,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 130,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 0,
            },
            {
              title: "111",
              quantY: 40,
              quantZ: 0,
            },
          ],
        },
      ],
      data4: [
        {
          data: [
            {
              title: "111",
              quantY: 50,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 260,
              quantZ: 30,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 60,
            },
            {
              title: "111",
              quantY: 70,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 80,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 140,
            },
            {
              title: "111",
              quantY: 10,
              quantZ: 40,
            },
          ],
          color: 0x33ccff,
        },
        {
          color: 0xff88c2,
          data: [
            {
              title: "111",
              quantY: 80,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 200,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 170,
              quantZ: 70,
            },
            {
              title: "111",
              quantY: 15,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 130,
              quantZ: 140,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 60,
            },
            {
              title: "111",
              quantY: 40,
              quantZ: 30,
            },
          ],
        },
      ],
      data5: [
        {
          data: [
            {
              title: "111",
              quantY: 50,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 260,
              quantZ: 30,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 60,
            },
            {
              title: "111",
              quantY: 70,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 80,
            },
            {
              title: "111",
              quantY: 50,
              quantZ: 140,
            },
            {
              title: "111",
              quantY: 10,
              quantZ: 40,
            },
          ],
          color: 0x33ccff,
        },
        {
          color: 0xff88c2,
          data: [
            {
              title: "111",
              quantY: 80,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 200,
              quantZ: 50,
            },
            {
              title: "111",
              quantY: 150,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 170,
              quantZ: 70,
            },
            {
              title: "111",
              quantY: 15,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 130,
              quantZ: 140,
            },
            {
              title: "111",
              quantY: 100,
              quantZ: 60,
            },
            {
              title: "111",
              quantY: 40,
              quantZ: 30,
            },
          ],
        },
        {
          color: 0xffff77,
          data: [
            {
              title: "111",
              quantY: 180,
              quantZ: 40,
            },
            {
              title: "111",
              quantY: 20,
              quantZ: 250,
            },
            {
              title: "111",
              quantY: 200,
              quantZ: 240,
            },
            {
              title: "111",
              quantY: 120,
              quantZ: 170,
            },
            {
              title: "111",
              quantY: 35,
              quantZ: 140,
            },
            {
              title: "111",
              quantY: 13,
              quantZ: 240,
            },
            {
              title: "111",
              quantY: 46,
              quantZ: 160,
            },
            {
              title: "111",
              quantY: 20,
              quantZ: 130,
            },
          ],
        },
      ],
      options: {
        cameraOpt: {
          fov: 20,
          width: 400,
          height: 400,
          position: {
            x: 1,
            y: 2.6,
            z: 3.4,
          },
        },
      },
    };
  },
  mounted() {
    this.drawLChart("line", "line-1", this.data1, {
      cameraOpt: {
        fov: 20,
        width: 500,
        height: 400,
        position: {
          x: 2,
          y: 0,
          z: 4,
        },
      },
    });
    this.drawLChart("line", "line-2", this.data1, {
      cameraOpt: {
        fov: 20,
        width: 500,
        height: 400,
        position: {
          x: 2,
          y: 0,
          z: 4,
        },
      },
      manifest: {
        smooth: true,
      },
    });
    this.drawLChart("line", "line-3", this.data2, {
      ...this.options,
    });
    this.drawLChart("line", "line-4", this.data2, {
      ...this.options,
      manifest: {
        smooth: true,
      },
    });
    this.drawLChart("line", "line-5", this.data3, {
      cameraOpt: {
        fov: 20,
        width: 500,
        height: 400,
        position: {
          x: 2,
          y: 0,
          z: 4,
        },
      },
    });
    this.drawLChart("line", "line-6", this.data3, {
      cameraOpt: {
        fov: 20,
        width: 500,
        height: 400,
        position: {
          x: 2,
          y: 0,
          z: 4,
        },
      },
      manifest: {
        smooth: true,
      },
    });
    this.drawLChart("line", "line-7", this.data4, {
      ...this.options,
    });
    this.drawLChart("line", "line-8", this.data5, {
      ...this.options,
      manifest: {
        smooth: true,
      },
    });
  },
  methods: {},
};
</script>

<style lang="scss">
.line-wrapper {
  display: flex;
  flex-wrap: wrap;
}
</style>
